<template>

  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :rowNumber="true"
    :maxHeight="700"
    :disabledRows="{ dbFieldName:'id'}"/>

</template>

<script>

import JEditableTable from '@/components/jeecg/JEditableTable'
import {FormTypes} from '@/utils/JEditableTableUtil'
import {syncAllTable} from '../util/TableUtils'

export default {
  name: 'PageAttributeTable',
  components: {
    JEditableTable
  },
  data() {
    return {
      loading: false,
      dataSource: [],
      columns: [
        {
          title: '字段名称', // 只读
          key: 'dbFieldName',
          // width: '9%',
          width: '100px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '',
          props: {'disabled': true}
        },
        {
          title: '字段备注', // 只读
          key: 'dbFieldTxt',
          // width: '9%',
          width: '100px',
          type: FormTypes.input,
          defaultValue: '',
          placeholder: '',
          props: {'disabled': true}
        },
        {
          title: '表单显示',
          key: 'isShowForm',
          // width: '3%',
          width: '80px',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: true
        },
        {
          title: '列表显示', // 多选框、默认true
          key: 'isShowList',
          // width: '3%',
          width: '80px',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: true
        },
        {
          title: '控件类型',
          key: 'fieldShowType',
          // width: '16%',
          width: '170px',
          type: FormTypes.select,
          options: [
            {title: '文本框', value: 'text'},
            {title: '密码', value: 'password'},
            {title: '单选框', value: 'radio'},
            {title: '多选', value: 'checkbox'},
            {title: '日期(yyyy-MM-dd)', value: 'date'},
            {title: '日期（yyyy-MM-dd HH:mm:ss）', value: 'datetime'},
            {title: '文件', value: 'file'},
            {title: '多行文本', value: 'textarea'},
            {title: '下拉框', value: 'list'},
            {title: '下拉多选框', value: 'list_multi'},
            {title: '字典搜索框', value: 'sel_search'},
            {title: 'popup弹出框', value: 'popup'},
            {title: '图片', value: 'image'},
            {title: 'UE编辑器', value: 'umeditor'},
            {title: '部门选择器', value: 'sel_depart'},
            {title: '用户选择器', value: 'sel_user'}
          ],
          defaultValue: 'text',
          placeholder: '请选择${title}',
          validateRules: [{required: true, message: '请选择${title}'}]
        },
        {
          title: '控件长度', // 数值
          key: 'fieldLength',
          // width: '9%',
          width: '100px',
          type: FormTypes.inputNumber,
          defaultValue: '120',
          placeholder: '请输入${title}',
          validateRules: [{required: true, message: '${title}不能为空'}]
        },
        {
          title: '是否查询',
          key: 'isQuery',
          // width: '5%',
          width: '60px',
          type: FormTypes.checkbox,
          customValue: ['1', '0'],
          defaultChecked: false
        },
        {
          title: '查询类型',
          key: 'queryMode',
          // width: '10%',
          width: '110px',
          type: FormTypes.select,
          options: [
            {title: '普通查询', value: 'single'},
            {title: '范围查询', value: 'group'}

          ],
          defaultValue: 'single',
          placeholder: '请选择${title}',
          validateRules: [{required: true, message: '请选择${title}'}]
        },
        {
          title: '扩展参数',
          key: 'fieldExtendJson',
          // width: '15%',
          width: '160px',
          type: FormTypes.input,
          defaultValue: ''
        },
        {
          title: '填值规则',
          key: 'fieldValueRuleCode',
          // width: '15%',
          width: '160px',
          type: FormTypes.input,
          defaultValue: ''
        }
      ]
    }
  },
  methods: {

    /** 同步列表 */
    syncTable(table1) {
      syncAllTable(this, table1)
    },

    /** 同步控件类型 */
    syncFieldShowType(row) {
      let table = this.$refs.editableTable
      table.setValues([{
        rowKey: row.id,
        values: {'fieldShowType': 'date'}
      }])
    }

  }
}
</script>

<style scoped>

</style>